<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.1/echarts.js"></script>
  <style>
    div {
      display: inline-block;
    }
    #charts1 {
      width: 400px;
      height: 400px;
      border: 1px solid #000;
    }
    #charts2 {
      width: 400px;
      height: 400px;
      border: 1px solid #000;
    }
    
  </style>
</head>
<body>
    <div id="charts1"></div>
    <div id="charts2"></div>
</body>
<script>
  var div1= document.querySelector('#charts1')
  var myChart1 = echarts.init(div1)
  myChart1.setOption({
    title: {
          text: 'ECharts 入门示例',
          subtext:'哈哈',
          left: 'center',
          textStyle:{
            color: 'red' ,
          }
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
          name:'商品',
          color:'red',
          nameTextStyle:{
            fontStyle : 'italic',
            color:'blue'
         },
         axisLabel: {
            show: true,
            textStyle: {
                color: 'red'
            }
        }
        },
        yAxis: {
           axisLine:{
             show: true
           },
           axisTick: {
             show: true 
            }
        },
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
            color:'red'
          }
        ]
  });

//使用字符集
  var div2= document.querySelector('#charts2')
  var myChart2 = echarts.init(div2)
  var data = [
    ['服装',50,85,'周一',30],
    ['箱包',40,57,'周二',30],
    ['衣柜',58,20,'周三',30],
    ['电子',96,36,'周四',100],
    ['花卉',82,85,'周五',30],
    ['日常用品',05,20,'周六',30],
    ['母婴',68,46,'周日',30],
  ]
  myChart2.setOption({
    dataset: {
        source:data
    },
    title:{
      text:'威海相亲女人数',
      textStyle:{
        color:'red'
      },
      subtext:'mm',
      subtextStyle:{
        color:'blue'
      },
      left:'left'     
    },
    xAxis:{
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis:{
       axisLine:{
        show : true
       },
       axisTick:{
         show:true
       }
    },
    series:[
      {
      type:'line',
      name:'折线图',
      encode:{
        x:3,
        y:2
      },
     /*  data:[15,60,80,120,42,65,25], */
      color:'green'
     },
     {
       name:'柱状图',
      type:'bar',
      encode:{
        x:3,
        y:1
      },
      /* data:[15,60,80,120,42,65,25], */
      color:'blue'
     },
     {
       name:'杂货铺',
      type:'pie',
      encode:{
        itemName: 0,
        value:4
      },
      //饼图可以显示文字，data写法如下
     /*  data:[
        {name:'周一',value:15},
        {name:'周二',value:60},
        {name:'周三',value:80},
        {name:'周四',value:120},
        {name:'周五',value:42},
        {name:'周六',value:65},
        {name:'周日',value:25},
      ], */
      //饼图的宽度与高度
      width:200,
      height:120,
      //饼图的半径
      radius:25,
      //饼图的位置
      left:210,
      top:10
     },
  
  ],
  //提示组件(鼠标悬浮时显示)
tooltip:{
  textStyle:{
    //文字颜色
    color:'red'
  }
},
//系列切换组件
legend:{
  data:['柱状图','折线图','杂货铺'],
  right: '10%'
},
// 工具栏组件
toolbox: {
  show: true,
  feature: {
    dataZoom: {
      yAxisIndex: "none"
    },
    dataView: {
      readOnly: false
    },
    magicType: {
      type: ["line", "bar"]
    },
    restore: {},
    saveAsImage: {}
  },
  bottom:10
},
//缩放x轴
dataZoom:{},
//调整图标布局
grid:{
  left:50
}
  })
</script>
</html>